import { useModel } from '@umijs/max';
import React, { useEffect, useState } from 'react';
import { Card, Carousel, List,Tag,Typography } from 'antd';
import { MessageError } from '@/utils/commonUtils';
import { listMaxCollectsUsingGet } from '@/services/novel-web/recommendController';
const {Title,Text } = Typography;
import './index.less';

const Welcome: React.FC = () => {
  // const { initialState } = useModel('@@initialState');
  const [banners,setBanners] = useState<API.NovelVO[]>([]);
  const loadData = async ()=>{
    try {
      const resp = await listMaxCollectsUsingGet({
        limit: 8,
      })
      setBanners(resp.data ?? []);
    } catch (error) {
      MessageError(error);
    }
    
  };
  useEffect(()=>{
    loadData();
  },[]);
  
  return (
    <div className='home-page'>
      {/* 轮播图 */}
      <section className='section-banners'>
        <Carousel autoplay autoplaySpeed={2000} effect='fade'>
          {banners.slice(0,4).map(banner =>(
            <div className='item-banner' key={banner.id}>
              <a href={`/novel/${banner.id}`}>
                <img 
                  src={banner.cover} 
                  alt={banner.name} 
                />
                <div className='title-wrapper'>
                  <Title level={3} style={{ color: '#fff' }}>{banner.name}</Title>
                </div>
              </a>
            </div>
          ))}
        </Carousel>
      </section>
      {/* 推荐列表区域 */}
      <section className='section-recommend'>
        <Title level={2} style={{ marginBottom: '24px' }}>热门推荐</Title>
        <List
          //  ,xs:1, sm:2, md:2, lg:4
          grid={{gutter:24 ,column:2}} 
          dataSource={banners}
          renderItem={item=>(
            <List.Item>
              <a href={`/novel/${item.id}`}>
              <Card 
                hoverable
                cover={
                  <img className='item-card-cover'
                    alt={item.name} src={item.cover}/>
                }
              >
                <Card.Meta
                  title={item.name}
                  // description={
                  //   <>
                  //     <Text type='secondary'>{item.user?.nickname}</Text>
                  //     {/* <div style={{ margin: '8px 0' }}>
                  //       {item.tags?.map(tag => (
                  //         <Tag key={tag.id}>{tag.name}</Tag>
                  //       ))}
                  //     </div>
                  //     <Text ellipsis style={{ display: 'block', marginBottom: '8px' }}>
                  //       {item.description}
                  //     </Text> */}
                  //     {/* <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                  //       <Text type="secondary">{item.wordCount}</Text>
                  //       <Text type="secondary">更新: {item.updateTime}</Text>
                  //     </div> */}
                  //   </>
                  // }
                />

              </Card>
              </a>
            </List.Item>
          )}
        />
      </section>

    </div>
  );
};

export default Welcome;
